{% load static %}

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <!-- 添加 favicon -->
    <link rel="icon" type="image/x-icon" href="{% static 'images/favicon.ico' %}">
    <!-- 为了更好的兼容性，可以添加多种格式 -->
    <link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/favicon/favicon.png' %}">
    <link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicon/favicon.png' %}">
    <link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicon/favicon.png' %}">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <title>ShareWave 博客- {% block title %}{% endblock %}</title>

    <!-- CSS 依赖 -->
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    <!-- 代码高亮 CSS -->
    <link rel="stylesheet" href="{% static 'md_css/monokai.css' %}">
    <!-- Font Awesome CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.14.0/css/all.min.css">
    <!-- Layui CSS -->
    <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">
    {% block css %}{% endblock css %}

    <!-- 页面基础样式 -->
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
        }

        /* 自定义滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        /* 滚动条轨道 */
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }

        /* 滚动条滑块 */
        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        /* 滚动条滑块悬停效果 */
        ::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }

        /* 滚动条角落 */
        ::-webkit-scrollbar-corner {
            background: #f1f1f1;
        }

        /* Firefox 滚动条样式 */
        * {
            scrollbar-width: thin;
            scrollbar-color: #c1c1c1 #f1f1f1;
        }

        #wrapper {
            min-height: 100%;
            margin-bottom: -40px;
        }

        #footer,
        #push {
            height: 60px;
        }

        a {
            color: rgb(53, 98, 224);
        }

        a:hover {
            color: blue;
        }
    </style>
</head>

<body data-user-authenticated="{% if user.is_authenticated %}true{% else %}false{% endif %}">
    <!-- 引入导航栏 -->
    {% include 'header.html' %}

    <!-- 页面主体内容 -->
    {% block content %}{% endblock content %}

    <!-- 引入注脚 -->
    {% include 'footer.html' %}

    <!-- 返回顶部按钮 -->
    {% include 'components/back_to_top.html' %}

    <!-- 在 back-to-top 组件后面添加 -->
    {% include 'components/share_buttons.html' %}

    <!-- JavaScript 依赖 -->
    <!-- jQuery -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!-- Popper.js -->
    <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!-- Layui JS -->
    <script src="//unpkg.com/layui@2.9.18/dist/layui.js"></script>
    <!-- 添加 QRCode 库用于生成二维码 -->
    <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
    <!-- Floating UI 浮动动效 -->
    <script type="module">
        import { computePosition, flip, shift, offset, arrow } from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.5.1/+esm';
        window.FloatingUI = { computePosition, flip, shift, offset, arrow };
    </script>
    <!-- 预留给其他页面的脚本位置 -->
    {% block script %}
    
    {% endblock script %}
</body>

</html>